<template>
    <div class="container">
        <div class="pin">
            <div class="kuai">
                <div class="xuan">
                    <input type="checkbox" name="goods" v-model="radio" @change="dan">
                </div>
                <div class="avatar">
                    <el-avatar :size="80" :src="require('../../public/image/a01bf044b8a03f35aea21fa14151f94.jpg')"></el-avatar>
                </div>
                <div class="info">
                    <div>999抗毒口服液</div>
                    <div style="font-size:14px;color:#666">10gx9袋</div>
                    <div class="kuai">
                        <div>￥19.9</div>
                        <div class="suan">
                           <span @click="remove">-</span> 
                           &emsp;{{num}}&emsp;
                           <span @click="add">+</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="pay">
            <div>
                <input type="checkbox" v-model="all" @change="quan">全选
            </div>
            <div>
                <div>总计：￥1</div>
            </div>
            <div>
                <el-button type="danger" round size="mini" @click="gopay">去结算</el-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: '',
    data() {
        return {
            radio:false,
            num:1,
            all:false
        };
    },
    props: {},

    components: {},

    created() {},

    mounted() {},

    methods: {
        remove(){
            if (this.num > 0){
                this.num--
            }else{
               alert("最小了")
            }
        },
        add(){
            this.num++
        },
        quan(){
            if (this.all == true){
                this.radio = thia.all
            }
            
        },
        dan(){
            if(this.radio == false){
                this.all = this.radio
            }
        },
        gopay(){
            this.$router.push("/order")
        }
    },

    computed: {},

    watch: {},

    directives: {},

    filters: {}
};
</script>

<style scoped>
.container{
    background-color: rgb(233, 231, 231);
    height: 500px;
}
.pin{
    margin-top: 20px;
    border-radius: 10px;
    background-color: white;
    padding: 10px;
}
.kuai{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    margin: 0 auto;
    
}
.xuan{
    width: 10%;
}
.avatar{
    width: 30%;
}
.info{
    width: 70%;
}
.suan{
    background-color: #ccc;
    padding: 2px 5px;
    border-radius: 25px;
}
.pay{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

</style>
